<template>
  <div class="movie-list">
    <div class="item" v-for="item in list" :key="item.id">
        <div class="item-l">
            <img :src="item.img" alt="">
        </div>
        <div class="item-c">
            <div class="title">
                {{item.nm}}
            </div>
            <div class="content">
                <div class="sc">
                    观众评
                </div>
                <div class="star">
                    <span>
                        主演：{{item.star}}
                    </span>
                </div>
                <div class="showInfo">
                    {{item.showInfo}}
                </div>
            </div>
        </div>
        <div class="item-r">
            <div class="btn" :style="{backgroundColor:item.showStateButton.color}">
                {{item.showStateButton.content}}
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import {getAllPro } from '@/api/request'
export default {
    data() {
        return {
            list:[],
            coming:[]
        }
    },
    created() {
        getAllPro("/movie").then(res=>{
            let {data} = res
            this.list = data.movieList
        })


        getAllPro("/coming").then(res=>{
            let {data} = res
            this.coming = data.coming
        })
    },
}
</script>

<style lang="scss" scoped>
    .movie-list{
        margin: .2rem .4rem ;
        .item{
            display: flex;
            justify-content: space-between;
            height: 2.2rem;
            margin-bottom: .2rem;
            .item-l{
                width: 1.8rem;
                overflow: hidden;
                img{
                    width: 1.8rem;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .item-c{
                flex: 1;
                margin-left: .2rem;
                display: flex;
                flex-flow: column nowrap;
                .title{
                    margin-top: .08rem;
                    font-size: .4rem;
                    font-weight: 800;
                }

                .content{
                    margin-top: .1rem;
                    font-size: .28rem;
                    color: #666;
                    div{
                        margin-top: .1rem;
                    }
                }
            }

            .item-r{
                width: 1.8rem;
                // background-color: #bfa;
                display: flex;
                align-items: center;
                justify-content: center;
                .btn{
                    width: 1.2rem;
                    height: 0.6rem;
                    line-height: .6rem;
                    text-align: center;
                    border-radius: .5rem;
                    color: #fff;
                }
            }
        }
    }
</style>